<!--
 * @Author: panghu chenjh@datamargin.com
 * @Date: 2024-04-26 17:45:34
 * @LastEditors: panghu chenjh@datamargin.com
 * @LastEditTime: 2024-04-26 18:30:24
 * @FilePath: \zheye\src\components\signUp.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <ValidateForm @form-submit="onSubmitForm">
    <div class="mb-3">
      <label class="form-label">邮箱地址</label>
      <ValidateInput v-model="formData.email" :rules="emaiRules" placeholder="请输入邮箱"/>
    </div>
    <div class="mb-3">
      <label class="form-label">昵称</label>
      <ValidateInput v-model="formData.nickName" :rules="nickNameRules" placeholder="请输入昵称"/>
    </div>
    <div class="mb-3">
      <label class="form-label">密码</label>
      <ValidateInput v-model="formData.password" :rules="passwordRules" type="password" placeholder="请输入密码"/>
    </div>
    <div class="mb-3">
      <label class="form-label">重复密码</label>
      <ValidateInput v-model="formData.repeatPassword" :rules="repeatPasswordRules" type="password" placeholder="请再次输入密码"/>
    </div>
    <template #submit>
      <button type="button" class="btn btn-primary">注 册 新 用 户</button>
    </template>
  </ValidateForm>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import ValidateInput, { RulesType } from '@/components/ValidateInput.vue'
import ValidateForm from '@/components/ValidateForm.vue'
import request from '@/utils/request'
import { useRouter } from 'vue-router'
import CreateMessage from '@/components/createMessage'
export default defineComponent({
  components: {
    ValidateForm,
    ValidateInput
  },
  setup () {
    const router = useRouter()
    const timer = ref<null | number>(null)
    const formData = reactive({
      email: '111@test.com',
      nickName: '张三',
      password: '111111',
      repeatPassword: '111111'
    })
    const emaiRules: RulesType = reactive([
      { type: 'required', message: '邮箱不能为空' },
      { type: 'email', message: '邮箱格式不对' }
    ])
    const nickNameRules: RulesType = reactive([
      { type: 'required', message: '请输入昵称' }
    ])
    const passwordRules: RulesType = reactive([
      { type: 'required', message: '密码不能为空' }
    ])
    const repeatPasswordRules: RulesType = reactive([
      { type: 'required', message: '请再次输入密码' },
      {
        type: 'custom',
        validator: () => {
          return formData.password === formData.repeatPassword
        },
        message: '密码输入不对'
      }
    ])
    const onSubmitForm = (value: boolean) => {
      if (value) {
        console.log('校验成功')
        request({
          url: '/api/users',
          method: 'post',
          data: {
            email: formData.email,
            nickName: formData.nickName,
            password: formData.password
          }
        }).then(res => {
          console.log('res===', res)
          CreateMessage('新建用户成功，马上跳转登录页', 'success')
          timer.value && clearTimeout(timer.value)
          timer.value = setTimeout(() => {
            router.push('/login')
          }, 2000)
        }).catch(err => {
          console.log(err)
        })
      }
    }
    return {
      formData,
      emaiRules,
      nickNameRules,
      passwordRules,
      repeatPasswordRules,
      onSubmitForm
    }
  }
})
</script>

<style scoped>

</style>
